<template>
  <div class="child">
    <div
      class="commentchild"
      v-for="(item, index) in childComment"
      :key="index"
    >
      <div class="commentchildlist">
        <div class="avatar">
          <img :src="item.userinfo.user_img" alt="" v-if="item.userinfo" />
          <img src="../../../assets/img/avatar.jpg" alt="" v-else />
        </div>
        <div class="comment">
          <p class="username" v-if="item.userinfo">
            {{ item.userinfo.name }}
          </p>
          <p class="username" v-else>无名氏</p>
          <p class="content" v-if="!hasReply">{{ item.comment_content }}</p>
          <p class="content" v-else>回复<span>{{item.parent_user_info.name}}</span>:{{ item.comment_content }}</p>
        </div>
        <div class="data" v-if="item.userinfo">
          <p>{{ item.comment_date }}</p>
          <!-- 最下一级的评论 -->
          <p class="reply" @click="replyItemComment(item.comment_id)">回复</p>
        </div>
      </div>

      <div>
        <!-- 最大的二级评论 -->
        <commentchildItem :childComment="item.child" :hasReply=true @replyToSecond="replyToSecond"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commentchildItem",
  data() {
    return {};
  },
  props: {
    childComment: {
      type: Array,
      default() {
        return [];
      }
    },
    hasReply:{
      type: Boolean,
      default: false
    }
  },
  methods: {
    replyItemComment(id){
      // 多层级评论将事件发送给上一级评论
      this.$emit('replyToSecond', id)
      this.$emit('replyToFirst', id)
    },
    replyToSecond(id){
      this.replyItemComment(id)
      // 二级评论将事件发送给一级评论
      this.$emit('replyToFirst', id)
    }
  },
};
</script>
<style lang="less" scoped>
.child {
  .commentchild {
    display: flex;
    flex-direction: column;

    .commentchildlist {
      display: flex;
      padding: 5px 0 0 25px;
      .avatar {
        text-align: center;
        flex: 1;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .comment {
        flex: 4;
        p {
          word-break: break-all;
          margin: 5px;
          line-height: 20px;
          font-size: 14px;
        }
        .username {
          color: #b5b5b5;
        }
        .content {
          padding-bottom: 10px;
          span{
            color: #3297fd;
            margin: 0 5px;
          }
        }
      }
      .data {
        flex: 1;
        text-align: center;
        color: #b5b5b5;
        font-size: 13px;
        p{
          margin: 5px;
          &.reply{
            margin-top: 8px;
            color: #02a774;
          }
        }
      }
    }
  }
}
</style>
